<template>
  <div class="config-wx" v-loading="loading">
    <el-form label-position="top" :model="formData" ref="formRef">
      <div class="wx-title">微信小程序开发配置</div>
      <el-form-item prop="appid" label="小程序AppId" :rules="[
        { required: true, message: '输入小程序AppId', trigger: 'blur' },
      ]">
        <el-input v-model="formData.appid" placeholder="输入小程序AppId" style="width: 40%" />
      </el-form-item>
      <el-form-item prop="secret" label="小程序密钥" :rules="[
        {
          required: true,
          message: '输入小程序密钥 AppSecret',
          trigger: 'blur',
        },
      ]">
        <el-input v-model="formData.secret" placeholder="输入小程序密钥 AppSecret" style="width: 40%" />
      </el-form-item>
      <div class="wx-title">微信支付开发配置</div>
      <el-form-item label="MCH_ID(微信商户账号)">
        <el-input v-model="formData.mch_id" placeholder="输入MCH_ID(微信商户账号)" style="width: 40%" />
      </el-form-item>
      <el-form-item label="MCH_KEY(微信商户密钥)">
        <el-input v-model="formData.mch_key" placeholder="输入MCH_ID(微信商户密钥)" style="width: 40%" />
      </el-form-item>
      <el-form-item label="MCH_V3_KEY(微信商户V3密钥)">
        <el-input v-model="formData.mch_v3_key" placeholder="MCH_V3_KEY(微信商户V3密钥)" style="width: 40%" />
      </el-form-item>
      <el-form-item label="MCH_CERT(微信商户证书)">
        <div style="font-size: 12px; color: #9d9fa0; width: 100%">
          *请选择需要上传证书类型，P12或PEM二选一，证书需要从微信商户平台获取。
        </div>
        <div style="width: 100%">
          <el-radio-group v-model="bookState" @change="changeState">
            <el-radio label="1">暂不使用证书</el-radio>
            <el-radio label="3">上传PEM证书</el-radio>
            <el-radio label="2">上传P12证书</el-radio>
          </el-radio-group>
        </div>
        <div v-if="bookState !== 1">
          <el-upload class="upload-demo" action="#" :limit="bookState - 1" :auto-upload="false"
            v-model:file-list="fileList" :on-change="fileOnChange" :on-remove="fileRemove">
            <el-button type="primary">
              {{ bookState == 3 ? "上传PEM证书" : "上传P12证书" }}
            </el-button>
            <template #tip>
              <div class="el-upload__tip" style="font-size: 12px; color: #9d9fa0; width: 100%">
                *{{
                  bookState == 3
                    ? "请依次上传KEY证书、CERT证书，否则无效！"
                    : "上传P12证书"
                }}
              </div>
            </template>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { uploadImgApi, certApi } from "@/plugins/api/upload";
import { configAddApi } from "@/plugins/api/system/config";
import { configApi } from "@/plugins/api/login";

let formData = ref({});
// 商城logo
let loading = ref(false);
let formRef = ref(null);
//
let bookState = ref(1);
// 文件上传
function changeState(data) {
  fileList.value = [];
  if (data == info.value.cert_type) {
    if (data == 3) {
      // bookState.value = 3;
      fileList.value.push({
        name: "key证书",
        file_url: info.value.mch_cert_key,
        url: import.meta.env.VITE_APP_BASE_API + info.value.mch_cert_key,
      });
      fileList.value.push({
        name: "cert证书",
        file_url: info.value.mch_cert_cert,
        url: import.meta.env.VITE_APP_BASE_API + info.value.mch_cert_cert,
      });
    } else if (data == 2) {
      // bookState.value = 2;
      fileList.value.push({
        name: "p12证书",
        file_url: info.value.mch_cert_p12,
        url: import.meta.env.VITE_APP_BASE_API + info.value.mch_cert_p12,
      });
    }
  }
}
let fileList = ref([]);
function fileOnChange(file) {
  let formData = new FormData();
  formData.append("file", file.raw);
  certApi(formData).then((resp) => {
    if (resp) {
      if (bookState.value == 3) {
        if (fileList.value.length == 1) {
          fileList.value[0].name = "key证书";
          fileList.value[0].file_url = resp;
        } else if (fileList.value.length == 2) {
          fileList.value[1].name = "cert证书";
          fileList.value[1].file_url = resp;
        }
      } else if (bookState.value == 2) {
        fileList.value[0].file_url = resp;
        fileList.value[1].name = "p12证书";
      }
    } else {
      ElMessage.danger("上传失败！请重新上传！");
    }
  });
}
function fileRemove() { }
//
function submit() {
  if (!formRef.value) return;
  formRef.value.validate((valid, fields) => {
    if (valid) {
      let arr = [
        {
          conf_name: "wechat.appid",
          conf_value: formData.value.appid,
        },
        {
          conf_name: "wechat.secret",
          conf_value: formData.value.secret,
        },
        {
          conf_name: "wechat.mch_id",
          conf_value: formData.value.mch_id,
        },
        {
          conf_name: "wechat.mch_key",
          conf_value: formData.value.mch_key,
        },
        {
          conf_name: "wechat.mch_v3_key",
          conf_value: formData.value.mch_v3_key,
        },
        {
          conf_name: "wechat.cert_type",
          conf_value: bookState.value,
        },
      ];
      if (bookState.value == 3) {
        if (fileList.value.length !== 2) {
          return ElMessage.warning("请依次上传KEY证书、CERT证书！");
        } else if (fileList.value.length == 2) {
          // PEM KEY'证书
          arr.push({
            conf_name: "wechat.mch_cert_key",
            conf_value: fileList.value[0].file_url,
          });
          // PEM cert证书
          arr.push({
            conf_name: "wechat.mch_cert_cert",
            conf_value: fileList.value[1].file_url,
          });
        }
      } else if (bookState.value == 2) {
        if (fileList.value.length == 0) {
          return ElMessage.warning("请上传P12证书！");
        } else if (fileList.value.length == 1) {
          // P12证书
          arr.push({
            conf_name: "wechat.mch_cert_p12",
            conf_value: fileList.value[0].file_url,
          });
        }
      }
      loading.value = true;
      configAddApi(arr)
        .then(() => {
          ElMessage.success("提交成功！");
          getConfigApi();
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
let info = ref({});
function getConfigApi() {
  configApi({
    conf_name: "wechat",
  }).then((data) => {
    info.value = Object.assign({}, data.wechat);
    // 证书
    fileList.value = [];
    if (data.wechat.cert_type == 3) {
      // bookState.value = 3;
      fileList.value.push({
        name: "key证书",
        file_url: data.wechat.mch_cert_key,
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.mch_cert_key,
      });
      fileList.value.push({
        name: "cert证书",
        file_url: data.wechat.mch_cert_cert,
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.mch_cert_cert,
      });
    } else if (data.wechat.cert_type == 2) {
      // bookState.value = 2;
      fileList.value.push({
        name: "p12证书",
        file_url: data.wechat.mch_cert_p12,
        url: import.meta.env.VITE_APP_BASE_API + data.wechat.mch_cert_p12,
      });
    }
    //
    formData.value.appid = data.wechat.appid;
    formData.value.secret = data.wechat.secret;
    formData.value.mch_id = data.wechat.mch_id;
    formData.value.mch_key = data.wechat.mch_key;
    formData.value.mch_v3_key = data.wechat.mch_v3_key;
    bookState.value = data.wechat.cert_type;
    //
  });
}
onMounted(() => {
  getConfigApi();
});
</script>
<style lang="scss" scoped>
.config-wx {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;

  .wx-title {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0;
  }

  .img-box {
    display: inline-block;
    margin-right: 5px;
    // margin-bottom: 10px;
    width: 148px;
    position: relative;

    img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }

    .occlusion {
      display: none;
      width: 100%;
      height: 140px;
      background: #9e9c9c75;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      text-align: center;

      .del {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 148px;
        color: #464444;
        cursor: pointer;
        font-size: large;

        &:hover {
          color: rgb(130, 131, 133);
        }
      }
    }

    &:hover {
      .occlusion {
        display: block;
      }
    }
  }
}
</style>
